import { ContentPackage } from '@/src/components';
import { useDispatch } from 'umi';
import LeftContent from './LeftContent';
import RightContent from './RightContent';
import StepsContent from './StepsContent';
import { useState, useRef, useEffect } from 'react';
import { namespace } from '@/src/newModels/pressureReport/SceneTemplateSettingsM';
import styles from './index.less';

export default () => {
  const leftContentRef = useRef();
  const dispatch = useDispatch();
  const [pageState, setPageState] = useState(1); // 1: 主功能， 2： 步骤条
  /**
   * 切换页面
   * @param {number} e 当前页面
   * @param {boolean} isFresh 是否刷新情景列表
   */
  const onHandlePage = (e, isFresh = false) => {
    setPageState(e);
    if (isFresh) leftContentRef.current?.updateList();
  };
  // 首次进入获取 维度下拉 缓存在model里
  useEffect(() => {
    dispatch({
      type: `${namespace}/getDictList`,
      payload: {},
    });
  }, []);
  return (
    <div className={styles.TemplateSetting}>
      {pageState === 1 ? (
        <ContentPackage
          title='压力情景模板配置'
          contentHtml={
            <div className={styles.WidthContent}>
              <LeftContent onHandlePage={onHandlePage} onRef={leftContentRef} />
              <div style={{ width: `calc(100% - ${leftContentRef.current?.leftWidth}px)` }}>
                <RightContent />
              </div>
            </div>
          }
        />
      ) : (
        <StepsContent onHandlePage={onHandlePage} />
      )}
    </div>
  );
};
